<template>
	<view class="fundingRecords">
		<u-tabs :list="tabs" @change="changeTabs" :scrollable="false"
			:inactiveStyle="{ color: '#ffffff', fontSize: '28rpx' }"
			:activeStyle="{ color: '#ffffff', fontSize: '28rpx', fontWeight: 'bold' }" lineColor="#b284dc">
			<template v-if="currentTabs == 1">
				<view slot="right" style="padding-left: 4px;" @tap="showActionList = !showActionList">
					<u-icon name="hourglass-half-fill" color="#eee" size="18" bold></u-icon>
				</view>
			</template>
		</u-tabs>
		<template v-if="currentTabs == 0">
			<view class="listContent">
				<view class="fundItem" v-for="flows in fundConfig.list">
					<view class="flexWrap item">
						<view class="time">
							<text class="title">{{flows.ctime}}</text>
						</view>
						<view class="status">
							<!-- 发布中 -->
						</view>
					</view>
					<view class="type item">
						<text class="title">类型：</text>{{flows.remark}}
					</view>
					<view class="flexWrap item">
						<view class="newPrice">
							<text class="title">现有余额：</text>{{$util.thousands(flows.newBalance)}}
						</view>
						<view class="detail price">
							<text class="symbol">￥ </text> {{flows.amount > 0 ? "+":""}}<text
								class="number">{{$util.thousands(flows.amount)}}</text>
						</view>
					</view>
					<view class="oldPrcie item">
						<text class="title">历史余额：</text>{{$util.thousands(flows.oldBalance)}}
					</view>
				</view>
			</view>
		</template>
		<template v-if="currentTabs == 1">
			<view class="listContent">
				<view class="fundItem" v-for="withdraw in fundConfig.list">
					<view class="flexWrap item">
						<view class="time">
							<text class="title">{{withdraw.ctime}}</text>
						</view>
						<view class="status">
							{{withdrawStatus[withdraw.status]}}
						</view>
					</view>

					<view class="type item">
						<text class="title">银行名称：</text>{{withdraw.bankName}} {{withdraw.subbranch}}
					</view>
					<view class="item">
						<text class="title">银行卡号：</text>{{withdraw.cardNo}}
					</view>
					<view class="flexWrap item">
						<view class="view">
							<text class="title">提现金额：</text><text
								class="number">￥{{$util.thousands(withdraw.amount)}}</text>
						</view>
						<view class="view">
							<text class="title">费率：</text><text>{{withdraw.fee}}%</text>
						</view>
					</view>

					<view class="flexWrap item">
						<view class="view">
							<text class="title">手机号：</text>{{withdraw.mobile}}
						</view>
						<view class="view">
							<button class="detailBtn">详情</button>
						</view>
					</view>

				</view>
			</view>
		</template>
		<u-empty :show="fundConfig.total == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
		<template v-if="fundConfig.total != 0">
			<u-loadmore :status="fundConfig.loadStatus" />
		</template>

		<u-action-sheet :actions="withdrawStatusList" @select="selectAction" :show="showActionList"></u-action-sheet>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import {
		withdrawStatus
	} from '@/common/config/enums.js'
	export default {
		data() {
			return {
				showActionList: false,
				currentTabs: 0,
				withdrawStatusList: [{
						name: "全部",
						code: null
					},
					{
						name: "审核中",
						code: 0
					},
					{
						name: "付款中",
						code: 1
					},
					{
						name: "已完成",
						code: 2
					},
					{
						name: "审核拒绝",
						code: 3
					},
					{
						name: "已取消",
						code: 4
					},

				],
				withdrawStatus,

				fundConfig: {
					list: [],
					page: 1,
					pages: 0,
					limit: 10,
					loading: false,
					loadStatus: 'loadmore',
					withdrawStatusCode: null,
				},
				tabs: [{
						name: "资金记录",
						code: 0
					},
					{
						name: "提现记录",
						code: 1,
					}
				]
			};
		},
		onLoad() {
			this._queryFundList();
		},
		onReachBottom() {
			if (this.currentTabs == 0) {
				this._queryFundList(true);
			} else {
				this._queryWithdrawList(true);
			}
		},
		methods: {
			...mapActions('user', ['queryFundList', 'queryWithdrawList']),
			changeTabs(cur) {
				this.currentTabs = cur.index;
				this.initListConfig();
				if (this.currentTabs == 0) {
					this._queryFundList();
				} else {
					this._queryWithdrawList();
				}
			},
			selectAction(e) {
				this.withdrawStatusCode = e.code;
				this.showActionList = false;
				this.initListConfig();
				this._queryWithdrawList();
			},
			initListConfig() {
				this.fundConfig.page = 1;
				this.fundConfig.total = -1;
				this.fundConfig.pages = 0;
				this.fundConfig.list = [];
				this.fundConfig.loading = false;
				this.fundConfig.loadStatus = "loadmore";
			},
			_queryFundList(ReachBtm) {
				if (this.fundConfig.loading || this.fundConfig.loadStatus == "nomore") return false;
				this.fundConfig.loading = true;
				this.fundConfig.loadStatus = "loading";
				if (ReachBtm) this.fundConfig.page++;
				this.queryFundList({
					limit: this.fundConfig.limit,
					page: this.fundConfig.page,
				}).then(res => {
					this.fundConfig.list = this.fundConfig.list.concat(res.rows);
					this.fundConfig.pages = res.pages;
					this.fundConfig.total = res.total;
					this.fundConfig.loadStatus = this.fundConfig.page >= this.fundConfig.pages ? "nomore" : "loadmore";
				}).finally(() => {
					this.fundConfig.loading = false;
					uni.stopPullDownRefresh();
				})
			},
			_queryWithdrawList(ReachBtm) {
				if (this.fundConfig.loading || this.fundConfig.loadStatus == "nomore") return false;
				this.fundConfig.loading = true;
				this.fundConfig.loadStatus = "loading";
				if (ReachBtm) this.fundConfig.page++;
				this.queryWithdrawList({
					limit: this.fundConfig.limit,
					page: this.fundConfig.page,
					status: this.withdrawStatusCode
				}).then(res => {
					this.fundConfig.list = this.fundConfig.list.concat(res.rows);
					this.fundConfig.pages = res.pages;
					this.fundConfig.total = res.total;
					this.fundConfig.loadStatus = this.fundConfig.page >= this.fundConfig.pages ? "nomore" : "loadmore";
				}).finally(() => {
					this.fundConfig.loading = false;
					uni.stopPullDownRefresh();
				})
			}
		},
	}
</script>

<style lang="scss">
	.fundingRecords {
		padding: 0px 20rpx 20rpx 20rpx;

		.listContent {
			.fundItem {
				padding: 20rpx 20rpx;
				margin-top: 30rpx;
				background-color: #484b5e;
				border-radius: 10rpx;
				font-size: 26rpx;

				.item {
					margin-bottom: 30rpx;
				}

				.detailBtn {
					color: #fff;
					font-size: 24rpx;
					width: 200rpx;
					border-radius: 100rpx;
					background: linear-gradient(90deg, #03a9f4, #f441a5);
				}

				.title {
					color: #cacaca;
				}

				.time {
					font-size: 24rpx;
				}

				.number,
				.price {
					font-size: 28rpx;
					color: #fac22b;
				}

				.flexWrap {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>
